 

 let cartList=document.querySelector(".cartList")
//   在详情页的按钮页面自定义了商品id,获取详情页加入到购物车页面的id


let strr=localStorage.getItem("uId")
console.log(strr)

let strCart=""

$.get("http://jx.xuzhixiang.top/ap/api/cart-list.php",

{id:strr},


(res)=>{


console.log(res)


let data=res.data
console.log(data)

data.forEach(function(item){


   strCart+= 
   `<li class="cartProduct">
    <input type="checkbox" class="cks">
   <div>
   
   <img src="${item.pimg}"/>
   <p>${item.pname}</p>
   <p class="pprice">${item.pprice}</p>
   <span class="minus" id="${item.pid}">-</span>
   <input class="num" type="text" value="${item.pnum}" id="${item.pid}">   
   <span class="plus" id="${item.pid}">+</span>
   <span class="del" id="${item.pid}">删除</span>
   <div class="perTotalPrice">${item.pnum*item.pprice}</div>
   </div>
   </li>`
   })
cartList.innerHTML=strCart

// 改变文本框的值

// for(let i=0;i<num.length;i++){
// num[i].oninput=function(){
//    perprice(i)

// }
// }
// 定义一个每件商品价格函数

function perprice(j){
    perTotalPrice[j].innerHTML=Number(pprice[j].innerHTML)*Number(num[j].value)

   }

 
//获取
// 点击加减删除以及文本框值发生改变按钮，会发生变化

let oLi=document.querySelectorAll(".cartProduct")  //每个li
let minus=document.querySelectorAll(".minus")
let plus=document.querySelectorAll(".plus")
let del=document.querySelectorAll(".del")
let num=document.querySelectorAll(".num") //文本框中商品的件数

let pprice=document.querySelectorAll(".pprice")//每件商品的单价
let perTotalPrice=document.querySelectorAll(".perTotalPrice")//每件商品的总价

let allPrice=document.querySelector(".allPrice")   //所有商品的总价

let cks=document.querySelectorAll(".cks")  //单选框按钮

let ckAll=document.querySelector(".checkAll")   //所有商品的总价


// 更新购物车数据
// 点击加号，文本框中的值增加
//将js对象转化为jQuery对象

   
   
// let dee = $(del);//将js对象转化成jQuery对象
   
   
let jia=$(plus)
  
for(let i=0;i<plus.length;i++){

    plus[i].onclick=function(){

        num[i].value++;
         perprice(i);
         totalPrice(i)
        
        $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
        
        {uid:68772,pid:jia.eq(i).attr("id"),pnum:$('.num').val()},
        (res)=>{
        
       
       
        })
        }
       }

// 点击减号,文本框中的值减少
    let jian=$(minus)
    for(let i=0;i<minus.length;i++){
      minus[i].onclick=function(){
      num[i].value--
      if(num[i].value<=1){
      num[i].value=1}
     perprice(i)
     totalPrice(i)

    $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
     {uid:68772,pid:jian.eq(i).attr("id"),pnum:$('.num').val()},
    (res)=>{
         console.log(res)
    }
    
    
    )
    }
    }

//点击删除按钮，该件商品从页面消失
  let shanchu=$(del)

   for(let i=0;i<del.length;i++){
   del[i].onclick=function(){

    cartList.removeChild(oLi[i])
    perprice(i)
    totalPrice()

   // 调取删除商品接口

console.log(shanchu.eq(0).attr("id"))


$.get("http://jx.xuzhixiang.top/ap/api/cart-delete.php",
{uid:68772,pid:shanchu.eq(i).attr("id")},

(res)=>{console.log(res)




})


    }

    }
  
// 复选框按钮
// 复选框选中的话，单选框全部选中

ckAll.onclick=function(){
  if(ckAll.checked){
  for(let i=0;i<cks.length;i++){
  cks[i].checked=true
  totalPrice()
  }
  }else{
      for(let i=0;i<cks.length;i++){
      cks[i].checked=false
      allPrice.innerHTML=""

  }
  }
  }


// 单选框按钮
// 遍历单选框,如果单选框全部选中，复选框自动勾选
// 点击单选框，单选框被选中的数量等于单选框的数量，复选框状态为被选中
// 


for(let i=0;i<cks.length;i++){
  
    cks[i].onclick=function(){
         let count=0 
        for(let j=0;j<cks.length;j++){

        if(cks[j].checked){
          
            count++}
                               
        if(cks.length==count){
             ckAll.checked=true

             totalPrice()
}else{
             ckAll.checked=false
             allPrice.innerHTML==Number(num[j].value)*Number(pprice[j].innerHTML)
            
}
}

}
}

// 定义一个计算总价的函数


function totalPrice(j){
let totals=0

for(let j=0;j<pprice.length;j++){


    totals+=Number(num[j].value)*Number(pprice[j].innerHTML)

}
  allPrice.innerHTML=totals
}

}

)

